<script setup lang='ts'>
const props = defineProps({
    isTransparent: { type: Boolean, default: false }
})
</script>

<template>
    <a-layout-header :class="[{ transparent: props.isTransparent }, 'header']">
        <div class="header-wrapper">
            <slot name="logo">
                <a href="/">
                    <div class="logo">
                        <img src="@/assets/img/logo.png" alt="" srcset="">
                    </div>
                </a>
            </slot>
            <slot name="user">
                <div class="user">
                    <div class="not-login">
                        <a-button type="primary" shape="round" class="login-btn">
                            登录
                        </a-button>
                    </div>
                </div>
            </slot>
        </div>
    </a-layout-header>
</template>

<style scoped lang='scss'>
.ant-layout-header {

    &.transparent {
        background-color: rgba($color: #000000, $alpha: .5);
        position: absolute;
        width: 100%;
        z-index: 1;

    }

    .header-wrapper {
        display: flex;
        justify-content: space-between;

        .user {
            .not-login {}
        }
    }
}
</style>